<template>
	<view>
		<block >
			<view class="top dis dis1">
				<view class="topView contenr">2020-10-01</view>
			</view>
			<view class="contens">
				<view class="top_1 dis dis3">
					<view class="top_left dis dis2">
						<image src="../../../static/image/ico_8.png" mode="aspectFit" class="imgs"></image>
						<text class="utex">系统公告</text>
					</view>
					<view class="top_left girths dis dis2 dis7">
						<image src="../../../static/image/ico_5.png" mode="aspectFit" class="imgs"></image>
						<text class="utex">查看详情</text>
					</view>
				</view>
				<view class="bootm contenr">本月的健康报告已就位，快来看看自己的变化吧</view>
				<view class="lin"></view>
			</view>
			<view class="read dis dis1 dis2">
				<text class="linte"></text>
				<text class="linteText">以下为已读消息</text>
				<text class="linte"></text>
			</view>
			<!-- 已读的 -->
			<view class="top dis dis1">
				<view class="topView contenr">2020-09-01</view>
			</view>
			<view class="contens">
				<view class="top_1 dis dis3">
					<view class="top_left dis dis2">
						<image src="../../../static/image/ico_8.png" mode="aspectFit" class="imgs"></image>
						<text class="utex">系统公告</text>
					</view>
					<view class="top_left girths dis dis2 dis7">
						<image src="../../../static/image/ico_5.png" mode="aspectFit" class="imgs"></image>
						<text class="utex">查看详情</text>
					</view>
				</view>
				<view class="bootm contenr">本月的健康报告已就位，快来看看自己的变化吧</view>
			</view>
		</block>
		<block v-if="list.length">
			<view class="lack dis dis1 dis2 dis5">
				<image src="../../../static/image/icon_9.png" mode="aspectFit" class="uimgas"></image>
				<text class="utext">空空如也，还没有消息喔～</text>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			list:[]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../common/css/flex.css";
	@import "../../../common/css/index.scss";
	
	.top {
		width: 100%;
		height: 100upx;

		.topView {
			width: 183upx;
			height: 36upx;
			background: rgba(0, 0, 0, 1);
			border-radius: 17upx;
			opacity: 0.12;
			margin-top: 40upx;
			font-size: 24upx;
			font-family: $typeface;
			font-weight: 400;
			color: #fff;
		}
	}

	.contens {
		width: 686upx;
		height: 215upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 24upx;
		margin: auto;

		// position: relative;
		.top_1 {
			width: 92%;
			height: 92upx;
			margin: auto;
			border-bottom: 1px solid #f2f2f2;

			.top_left {
				width: 40%;
				height: 100%;

				.imgs {
					width: 44upx;
					height: 44upx;
				}

				.utex {
					font-size: 28upx;
					font-family: $typeface;
					font-weight: 400;
					color: #333333;
					margin-left: 8upx;
				}
			}

			.girths {
				.utex {
					font-size: 28upx;
					font-family: $typeface;
					font-weight: 400;
					color: #999999;
					// margin-left: 8upx;
				}
			}

		}

		.bootm {
			width: 95%;
			height: 122upx;
			margin: auto;
			font-size: 30upx;
			font-family: $typeface;
			font-weight: 500
		}

		.lin {
			width: 24upx;
			height: 24upx;
			background-color: red;
			border-radius: 50%;
			position: absolute;
			top: 90upx;
			right: 30upx;
		}
	}

	.read {
		width: 686upx;
		height: 200upx;
		margin: auto;

		.linte {
			width: 61upx;
			height: 1px;
			background-color: #999999;
			margin: 120upx 30upx 30upx 30upx;
		}

		.linteText {
			margin: 120upx 0 30upx 0;
			font-size: 24upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
	.lack{
		width: 100%;
		height: 100vh;
		.uimgas{
			width: 370upx;
			height: 254upx;
		}
		.utext{
			font-size:32upx;
			font-family:$typeface1;
			font-weight:400;
			color: #999999;
		}
	}
</style>
